<template>
	<div style="width:1405px ;margin-top: 10px;background-color:#F5F5F5 ;">
		<el-row :gutter="20">
			<el-col :span="18">
				<div style="background-color: white;width:865px;
		   			   margin-left: 110px;margin-bottom: 10px;
		   			   height: 40px;">
					<a href="/pagesIndex/shouYeIndex"><el-icon style="height: 60px;width: 60px;">
							<HomeFilled
								style="height: 30px;width: 30px;margin-left: 10px;margin-top: -18px;color:#88B9F9;" />
						</el-icon></a>
					<div style="margin-top:-48px;margin-left: 56px;">/
						<span style="font-size: 20px; color:rgba(59,164,254,0.7) ;">纯音乐</span>
					</div>
				</div>
				<!-- 搜索栏 -->
				<div id="app1" style="width: 865px;height: 40px;margin-left: 110px; background-color:antiquewhite;">
					<el-row :gutter="50">
						<el-col :span="4" style="text-align: center;margin-top:5px;margin-left:18px">
							<el-button type="text" @click="doList1">最新</el-button>
						</el-col>
						<el-col :span="4" style="text-align: center;margin-top:5px">
							<el-button type="text" @click="doList2">热门</el-button>
						</el-col>
						<el-col :span="4" style="text-align: center;margin-top:5px">
							<el-button type="text" @click="doList3">月榜</el-button>
						</el-col>
						<el-col :span="4" style="text-align: center;margin-top:5px">
							<el-button type="text" @click="doList4">周榜</el-button>
						</el-col>
						<el-col :span="4" style="text-align: center;margin-top:5px">
							<el-button type="text" @click="doList5">日榜</el-button>
						</el-col>

					</el-row>
				</div>
				<!-- 表格 -->
				<el-table :data="tableData" style="width:865px;margin-left: 110px;">
					<el-table-column prop="date" width="400" #default="scope">
						<div>
							<el-button type="text">
								<!--   头像 -->

								<div class="demo-type" style="margin-top: 20px;">
									<el-button type="text" @click="yonghu(scope.row)">
										<el-avatar :size="30" src="https://empty" @error="errorHandler">
											<img :src="scope.row.user_img">
										</el-avatar>
									</el-button>
								</div>
							</el-button>

							<div style="margin-top:-30px;margin-left:35px; height: 5px;">
								<el-button type="text"
									@click="gequ(scope.row)">{{scope.row.music_author}}—{{scope.row.music_name}}
								</el-button>
							</div>
							<div style="margin-top:20px;margin-left:35px;">
								{{scope.row.music_user_name}}-{{scope.row.music_time}}
							</div>
						</div>
					</el-table-column>

					<!--  表格右边的浏览量 -->
					<el-table-column prop="name" width="400" #default="scope">
						<div style="color:aliceblue;
		                       margin-top:14px;margin-left:300px;height:20px;width:40px
		   			        text-align: center;
		   					color: #88B9F9;
		   					">
							<svg style="margin-left: -80px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
								fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
								<path
									d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z" />
							</svg>
							{{scope.row.music_tu}}
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
								class="bi bi-star" viewBox="0 0 16 16">
								<path
									d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" />
							</svg>
							{{scope.row.music_sc}}
						</div>
					</el-table-column>
				</el-table>



				<!-- 分页 -->
				<div style="margin-left: 110px;background-color: white;width:865px ;height: 40px;">
					<el-pagination style="margin-left: 300px;" v-model:current-page="page.pageNum"
						v-model:page-size="page.pageSize" layout="total, prev, pager, next, jumper" :total="page.total"
						@click="doList" />
				</div>
				<div class="grid-content ep-bg-purple"></div>
			</el-col>

			<el-col :span="6" style="margin-left: -90px;">

				<el-button style="margin-left: 0px;width: 300px;height: 40px;" type="primary"
					@click="showAddDialog">发新帖</el-button>
				<div style="margin-top: 10px;">
					<img src="../../assets/yingyue.png" style="width: 300px;">
				</div>
				<div style="width: 300px;background-color:white;">
				</div>

				<div style="width: 300px;height:40px;background-color:white;margin-bottom: -5px;">
					<div style="margin-left:-190px;text-align: center;">主题数</div>
					<div style="margin-left:-190px; height: 5px;text-align: center;">
						32
					</div>
					<div style="margin-top:-26px;text-align: center;">帖子数</div>
					<div style=" height: 5px;text-align: center;">
						32
					</div>
					<div style="margin-left:190px;margin-top:-26px;text-align: center;">今日主题</div>
					<div style="margin-left:190px; height: 5px; text-align: center;">
						32
					</div>
				</div>
				<el-input style="margin-top:10px;width: 230px" v-model="input" placeholder="关键词"
					:prefix-icon="Search" />
				<el-button style="margin-top:10px;width: 70px;" type="primary" @click="doList6">搜索</el-button>
				<div style="height:15px">
				</div>

				<div style="height: 320px;width:300px;background-color:white;">
					<el-header style="text-align:left;background-color: white;height:20px ;">热门节点</el-header>
					<div style="margin-left: 25px;">
						<el-divider content-position="right" style="margin-top: 14px;margin-left: -8px;"></el-divider>
						<el-row style="margin-left: -20px;">
							<el-col :span="6">
								<el-button size="small" @click="doList7('周杰伦')">周杰伦</el-button>
							</el-col>
							<el-col :span="6">
								<el-button size="small" @click="doList7('毛不易')">毛不易</el-button>
							</el-col>
							<el-col :span="6">
								<el-button size="small" @click="doList7('陈奕迅')">陈奕迅</el-button>
							</el-col>
							<el-col :span="6">
								<el-button size="small" @click="doList7('BEYONG')">BEYONG</el-button>
							</el-col>
						</el-row>

					</div>
				</div>
				<div style="width: 300px;height:190px;margin-bottom: 10px;background-color: white;">
					<div style="margin-left: 10px;height: 10px;"></div>
					<div
						style="width: 240px;margin-left: 30px;background-color: #312A2A;height: 70px; border-radius: 15px;">
						<div style="height: 16px;width: 240px;"></div>
						<div style="color:#E2C2B9;margin-left: 20px;">
							黑胶vip</div>
						<div style="color:#E2C2B9;margin-left: 120px;margin-top: -20px;">

							<el-popover placement="right" :width="400" trigger="click">
								<template style="height: 500px;width:500px;" #reference>
									<el-button
										style="background-color:#E2C2B9;height:26px;width: 70px;margin-left: 20px;"
										round>优惠购买</el-button>
								</template>
								<el-row>
									<el-col :span="10">
										<img src="../../assets/gg.png" style="width: 200px;height: 200px;">
									</el-col>
									<el-col :span="6">

									</el-col>
									<el-col :span="4">
										<div>588/1年</div>
									</el-col>
								</el-row>

							</el-popover>

						</div>
						<div style="color: #E2C2B9;font-size: 12px;
				 						margin-left: 20px;">立享21项特权</div>
					</div>
					<div style="height: 16px;width: 240px;margin-top: 20px;
				 					  margin-left: 30px;
				 					  color: #666666;font-size: 14px">
						登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
					</div>
					<div style="margin-top: 30px;margin-left: 110px;">
						<el-button style="background-color:#E2C2B9;height:30px;width: 70px;" round>用户登录</el-button>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
	<!-- 发贴 top="2vh"是顶部距离 v-model="addDialogVisible"用来绑定是否开启弹窗-->

	<add-page ref="addDialogVisible">
	</add-page>


</template>

<script setup>
	import {
		Search
	} from '@element-plus/icons-vue'
	import {
		nextTick,
		onMounted,
		ref
	} from 'vue';
	import {
		UserFilled
	} from '@element-plus/icons-vue'
	import axios from 'axios';
	import AddPage from '../adminPage/musicMgr/AddPage.vue';

	function yonghu(m) {
		location.href = "/pagesIndex/yongHu?user_id=" + m.music_user_id;
	};

	function gequ(t) {
		location.href = "/pagesIndex/play?music_id=" + t.music_id;
	}

	const tez = ref('');
	const input = ref('');
	//用来测试
	function u() {
		alert("u");
	};
	// 分页条件
	const page = ref({
		//第几页
		pageNum: 1,
		//一共多少页
		pages: 0,
		//一共多少条
		total: 0,
		//一页多少行
		pageSize: 10
	});

	//重置分页查询
	const doPageReset = () => {
		page.value.pageNum = 1;
		page.value.pageSize = 10;
	}

	// 表格数据展现
	const tableData = ref([

	]);

	const music = ref({
		music_type: "5",
		music_date: "",
		music_time: "",
		music_rm: "",
		music_sc: "",
		music_tu: "",
		music_zhou: "",
		music_author: "",
	});
	// 查询
	const doList = () => {

		axios({
			url: '/api/music/list1',
			method: 'GET',
			params: Object.assign({}, music.value, {
				pageNum: page.value.pageNum,
				pageSize: page.value.pageSize
			})
		}).then(response => {
			// console.log(response.data)

			tableData.value = response.data.list;
			tableData.value.forEach(item => {
				item.user_img = "/api/src/images/" + item.user_img;
			});
			console.log(tableData.value);
			// 分页信息
			page.value.pages = response.data.pages;
			page.value.total = response.data.total;
			if (tez.value == '') {
				tez.value = response.data.total;
			};
			console.log(response.data.total);
		});
	};

	//最新查询
	const doList1 = () => {
		tableData.value = ([

		]);
		const today = new Date();
		const day = today.getDate() + 1;
		const month = today.getMonth() + 1;
		const year = today.getFullYear();
		music.value.music_zhou = year + "/" + month + "/" + day;
		music.value.music_time = "";
		music.value.music_rm = "";
		music.value.music_sc = "";
		music.value.music_tu = "";
		doList();
	};

	//热门查询
	const doList2 = () => {
		tableData.value = ([

		]);
		music.value.music_zhou = "";
		music.value.music_rm = "1";
		music.value.music_time = "";
		music.value.music_sc = "";
		music.value.music_tu = "";
		doList();
	}


	//月榜查询
	const doList3 = () => {
		tableData.value = ([

		]);
		const today = new Date();
		const month = today.getMonth() + 1;
		const year = today.getFullYear();
		music.value.music_zhou = "";
		music.value.music_time = year + "/" + month
		music.value.music_rm = "";
		music.value.music_sc = "60";
		music.value.music_tu = "60";
		doList();
	};

	//周榜查询
	const doList4 = () => {
		tableData.value = ([

		]);
		const today = new Date();
		const month = today.getMonth() + 1;
		const year = today.getFullYear();
		const day = today.getDate() + 1;
		music.value.music_zhou = year + "/" + month + "/" + day;
		music.value.music_time = "";
		music.value.music_rm = "";
		music.value.music_sc = "60";
		music.value.music_tu = "60";
		doList();
	};

	//日榜查询
	const doList5 = () => {
		tableData.value = ([

		]);
		const today = new Date();
		const day = today.getDate();
		const month = today.getMonth() + 1;
		const year = today.getFullYear();
		music.value.music_zhou = "";
		music.value.music_time = year + "/" + month + "/" + day;
		music.value.music_rm = "";
		music.value.music_sc = "60";
		music.value.music_tu = "60";
		doList();
	};
	//搜索
	const doList6 = () => {
		tableData.value = ([

		]);
		music.value.music_author = input.value;
		music.value.music_type = "";
		input.value = "";
		music.value.music_zhou = "";
		music.value.music_time = "";
		music.value.music_rm = "";
		music.value.music_sc = "";
		music.value.music_tu = "";
		doList();
		music.value.music_type = "5";
		music.value.music_author = "";
	}
	const doList7 = (i) => {
		input.value = i;
		doList6();
	}
	//--------------------------- 发贴框 ---------------------------
	const addDialogVisible = ref();
	const showAddDialog = () => {
		addDialogVisible.value.handleAddForm();
	}

	onMounted(() => {
		doList();
	});
</script>
<style scoped>
	#m2 {
		height: 300px;
		position: relative;
	}

	#m2 img {
		width: 1170px;
		height: 100%;
		float: left;
		display: none;
	}

	#m2 img:first-child {
		display: block;
	}

	#ss-hover {}

	.el-row {
		margin-bottom: 20px;
	}

	.el-row:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.demonstration {
		color: var(--el-text-color-secondary);
	}

	.el-carousel__item h3 {
		color: #475669;
		opacity: 0.75;
		line-height: 150px;
		margin: 0;
		text-align: center;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #d3dce6;
	}

	#app1>.el-row>.el-col>.el-button {
		color: gray;
		font-size: 20px;
	}
</style>